import React ,{ useState } from "react";
import Tabbar from "@/components/TabBar";
import HomeHeader from "../../components/HomeHeader";
import { Avatar, Card, Toast } from "antd-mobile";
import AvatarSrc from "../../../src/assets/img/pika.jpg";
import { RightOutline } from "antd-mobile-icons";
import { useNavigate, useLocation} from 'umi'
import { userLogin } from '@/api';
import "./style.scss";
import Icon from "@/components/Icon";


function userPage() {
  let [msgTips, setMsg] = useState('立即登录');

  const navigate = useNavigate();
  const location = useLocation();

  const onClick = () => {
    (localStorage.getItem('token')) ? navigate('/cart') : navigate('/login')
  };
  const getItem = () =>{
    (localStorage.getItem('token')) ? navigate(`/detail/${1185302}`) : navigate('/login')
  }
  return (
    <div>
      <HomeHeader/>
      <div className="userinformation">
        <div className="userinfo-box">
          <div className="userinfo-box2">
            <div className="userinfo-box-left">
              <Avatar src={AvatarSrc} style={{ "--size": "48px" }} />
            </div>
            <div className="userinfo-box-center">
              <p onClick={()=>{
                (localStorage.getItem('token')) ? setMsg(msgTips='您好,xxx') : navigate('/login')
              }}>{msgTips}</p>
            </div>
          </div>
        </div>
        <Card
          className="userinfo-card"
          title="全部订单"
          extra={<RightOutline />}
          onClick={onClick}
        >
          <div className="userinfo-cardmsg">
            <div>
              <Icon name="wodedingdan" size={22} color="coral" />
              <p>待配送</p>
            </div>
            <div>
              <Icon name="xiaoxizhongxin" size={22} color="coral" />
              <p>今日配送</p>
            </div>
            <div>
              <Icon name="wodehongbao" size={22} color="coral" />
              <p>评价有礼</p>
            </div>
          </div>
        </Card>
        <Card
          className="userinfo-card"
          title="我的收藏"
          extra={<RightOutline />}
          onClick={getItem}
        >
          <div className="userinfo-cardmsg">
            <div>
              <p>0</p>
              <p>积分</p>
            </div>
            <div>
              <p>0</p>
              <p>优惠劵</p>
            </div>
            <div>
              <p>0</p>
              <p>收藏</p>
            </div>
            <div>
              <p>0</p>
              <p>足迹</p>
            </div>
          </div>
        </Card>
        <Card
          className="userinfo-card"
          title="设置"
          extra={<RightOutline />}
          onClick={onClick}
        >
          <div className="userinfo-cardmsg">
            <div>
              <Icon name="wodedingdan" size={22} color="coral" />
              <p>待配送</p>
            </div>
            <div>
              <Icon name="xiaoxizhongxin" size={22} color="coral" />
              <p>今日配送</p>
            </div>
            <div>
              <Icon name="wodehongbao" size={22} color="coral" />
              <p>评价有礼</p>
            </div>
          </div>
        </Card>
      </div>
      <Tabbar />
    </div>
  );
}
export default userPage;
